<template>
  <div>
    <el-card>
      <h2>用户列表</h2>
      <el-table :data="dataList" border element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                v-loading="loading" height="600"
                style="width: 100%;margin-top: 20px">
        <el-table-column prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="role" label="角色">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
        </el-table-column>
        <el-table-column width="300" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-delete" @click="openRoleDialogShow(scope.row.id)">分配角色
            </el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deleteUser(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="分配角色" :visible.sync="roleDialogShow">
      <el-select v-model="roleForm.role" placeholder="请选择分配的角色">
        <el-option label="" value=""></el-option>
        <el-option label="管理员" value="admin"></el-option>
        <el-option label="普通用户" value="user"></el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="updateUserRole">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import userApi from "@/api/userApi";

export default {
  name: "UserList",
  components: {},
  data() {
    return {
      dataList: [],
      loading: false,
      roleDialogShow: false,
      roleForm: {
        "id": "",
        "role": ""
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      userApi.userList().then(resp => {
        this.dataList = resp.data
      })
    },
    updateUserRole() {
      if (this.roleForm.role === "") {
        this.$message.error("请选择角色")
      } else {
        userApi.updateUserRole(this.roleForm).then(resp => {
          if (resp.code === 200) {
            this.$message.success(resp.message)
          } else {
            this.$message.error(resp.message)
          }
          this.roleDialogShow = false
          this.getData()
        })
      }
    },
    openRoleDialogShow(id) {
      this.roleForm.id = id
      this.roleDialogShow = true
    },
    deleteUser(row) {
      this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userApi.deleteUser(row.id).then(resp => {
          if (resp.code === 200) {
            this.$message.success(resp.message)
            this.getData()
          } else {
            this.$message.error(resp.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }

}
</script>

<style scoped>
</style>
